import { App } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
export default {
  install (app: App) {
    // 创建一个自定义指令用于图片懒加载
    app.directive('lazyImg', {
      // 生命周期
      mounted (dom, obj) {
        // 给图片添加监测事件，检测图片是否进入可视区域
        const { stop } = useIntersectionObserver(
          dom,
          ([{ isIntersecting }]) => {
            if (isIntersecting) {
              // 该值如果为truej就证明图片进入了可视区域
              dom.src = obj.value
              //    添加图片检测器，图片出错时执行
              // 停止图片监测
              stop()
              dom.onerror = function () {
                dom.src = defaultImg
              }
            }
          }
        )
      }
    })
  }
}
